import React, { useEffect,memo } from 'react'
import ReactEcharts from 'echarts-for-react'


interface VChartPropsType {
  width?:number|string,
  height?:number|string,
  option:any,
  isFullScreen:boolean,
  fontColor?:string

}
// react默认父组件渲染，子组件也会跟着渲染，使用memo可以阻止子组件渲染，只有当props改变时才会渲染。在此hover会导致子组件chart不必要的渲染
const VChart:React.FC<VChartPropsType> = ({width,height,option,isFullScreen,fontColor}) => {
  const chartRef = React.useRef(null);
  console.log("VChart组件渲染");

  // ocontainner的height需要比option的height大
  const chartsSize={width:660,height:500}
  const myOption={...option,
    width:530,height:370,
    textStyle:{color:fontColor,fontSize:18},
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none',
        },
        restore: {},
        saveAsImage: {},
      //   myTool1: {
      //     show: true,
      //     title: '自定义扩展方法1',
      //     icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
      //     onclick: function (){
      //         // alert('myToolHandler1')
      //         console.log(chartRef.current.getEchartsInstance());
      //         // chartInstance.resize(1000,800)
      //     }
      // },
      },
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100,
      },
      {
        start: 0,
        end: 100,
        handleIcon:
          'M10 3V13L22 3V13',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2,
        },
      },
    ],
  }
  if(isFullScreen){
    chartsSize.width=window.innerWidth*0.8;
    chartsSize.height=window.innerHeight*0.8;

    myOption.width=chartsSize.width-130;
    myOption.height=chartsSize.height-130;
  } 
 
  useEffect(() => {
    // console.log(chartsSize);
    // console.log(isFullScreen);
    // @ts-ignore
    const chartInstance = chartRef.current.getEchartsInstance() ;
    // 监听窗口大小变化，调用resize方法
    const handleResize = () => {
      chartInstance.resize();
    };
    // 添加窗口大小变化事件监听器
    window.addEventListener('resize', handleResize);

  }, [chartsSize,isFullScreen])
    
  return (
    <ReactEcharts 
    style={{width:chartsSize.width,height:chartsSize.height}}
     option={myOption} ref={chartRef} />

   
  )
}

export default memo(VChart);

